<script setup lang="ts">
import {reactive, ref, onMounted} from "vue";
import {useRouter} from "vue-router";
import tableList from "@/components/tableList/tableList.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {dataDel, dataList, dataCopy, levelList} from "@/api/school";

const pageData = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})
const router = useRouter()
const tableData = ref([])
const searchForm = ref('')
const loading = ref()
const tableHeader = reactive([
  {
    label: '学校名称', prop: 'school_name', type: 'btn', method: (row) => {
      handleEdit(row)
    }
  },
  {label: '学校类别', prop: 'school_type'},
  {label: '所属栏目', prop: 'column_name'},
  {label: '创建时间', prop: 'created_at'},
  {label: '更新时间', prop: 'updated_at'}
])

const tableOptions = reactive(
    {
      label: '操作',
      width: '260px',
      value: 1,
      options: [
        {
          label: '预览',
          icon: 'View',
          method: (row) => {
            handleView(row)
          }
        },
        {
          label: '复制',
          icon: 'DocumentCopy',
          method: (row) => {
            handleCopy(row)
          }
        },
        {
          label: '编辑',
          icon: 'Edit',
          method: (row) => {
            handleEdit(row)
          }
        },
        {
          label: '删除',
          icon: 'Delete',
          method: (row) => {
            handleDel(row)
          }
        },
      ]
    }
)

const handleEdit = (row) => {
  router.push({path: '/school-manage/school-info', query: {id: row.id}})
}

const handleView = (row) => {
  const baseUrl = row.school_type === '二级'
      ? 'http://12.test.edu365.cn/school/page/'
      : 'http://12.test.edu365.cn/school/';
  window.open(`${baseUrl}${row.id}.html`, '_blank');
}

const handleCopy = async (row) => {
  let res = await dataCopy({id: row.id})
  if (res) {
    ElMessage({message: '复制成功', type: 'success'})
    await fetchData()
  }
}

const handleDel = (row) => {
  ElMessageBox.confirm('确定要删除吗?,一旦删除无法恢复', {type: 'warning'}).then(async () => {
    let res = await dataDel({id: row.id})
    if (res) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      await fetchData()
    }
  })
}

// const handleDelete = () => {
//   if (!selections.value.length) return ElMessage({type: 'warning', message: '请选择要删除的数据'})
// }

const formInline = reactive({
  title: '',
  type: '',
  column_id: '',
})

const onSearch = (type) => {
  if (type === 'reset') {
    searchForm.value.resetFields()
  } else {
    fetchData()
  }
}

const fetchData = async () => {
  loading.value = true
  let params = formInline
  params.page = pageData.currentPage
  params.limit = pageData.pageSize
  console.log(params);
  let res = await dataList(params);
  loading.value = false
  if (res) {
    tableData.value = res.data.list
    pageData.total = res.data.page.amount
  }
}

const handlePageChange = (param) => {
  pageData.pageSize = param.limit
  pageData.currentPage = param.page
  fetchData()
}

const onAdd = () => {
  router.push('/school-manage/school-insert')
}

let levelOption: any = reactive([])
const fetchLevel = async () => {
  let res = await levelList()
  if (res) {
    levelOption.push(...res.data)
  }
}
onMounted(() => {
  fetchData()
  fetchLevel()
})

defineOptions({
  name: '内容管理'
})
//旅游酒店 工业金属 保险 电力

</script>
<template>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="formInline" class="el-input-form" ref="searchForm">
        <el-form-item label="学校名称" prop="title">
          <el-input v-model="formInline.title" placeholder="学校名称" clearable/>
        </el-form-item>
        <el-form-item label="学校类别" prop="type">
          <el-select v-model="formInline.type" clearable>
            <el-option label="一级" value="1"></el-option>
            <el-option label="二级" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属栏目" prop="column_id">
          <el-select v-model="formInline.column_id" clearable>
            <el-option v-for="(item,index) in levelOption" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onSearch" clearable icon="search">查询</el-button>
          <el-button plain @click="onSearch('reset')" icon="RefreshLeft">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-button style="margin-bottom: 15px" plain @click="onAdd" icon="plus" type="primary">添加</el-button>
    <!--    <el-button  plain @click="handleDelete" icon="Delete">批量删除</el-button>-->
    <el-col :span="24" class="table-wrap" v-loading="loading">
      <tableList
          :page-data="pageData"
          :table-data="tableData"
          :table-header="tableHeader"
          @handle-page-change="handlePageChange"
          :table-options="tableOptions">
      </tableList>
    </el-col>
  </el-row>
</template>
